<template>
  <view class="bind-phone-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">{{ isChanging ? '修改手机号' : '绑定手机号' }}</text>
    </view>
    
    <view class="phone-container">
      <!-- 当前手机信息 -->
      <view class="current-phone" v-if="isChanging">
        <text class="label">当前手机号</text>
        <text class="value">{{ maskPhone(currentPhone) }}</text>
      </view>
      
      <!-- 验证步骤 -->
      <view class="verify-steps">
        <view class="step-item" :class="{ active: currentStep >= 1, done: currentStep > 1 }">
          <view class="step-num">1</view>
          <text class="step-text">{{ isChanging ? '验证当前手机号' : '验证身份信息' }}</text>
        </view>
        <view class="step-line"></view>
        <view class="step-item" :class="{ active: currentStep >= 2, done: currentStep > 2 }">
          <view class="step-num">2</view>
          <text class="step-text">{{ isChanging ? '绑定新手机号' : '绑定手机号' }}</text>
        </view>
        <view class="step-line"></view>
        <view class="step-item" :class="{ active: currentStep >= 3, done: currentStep > 3 }">
          <view class="step-num">3</view>
          <text class="step-text">完成</text>
        </view>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-container">
        <!-- 步骤1: 验证当前手机 -->
        <view class="verify-form" v-if="currentStep === 1">
          <view class="form-group">
            <view class="input-item">
              <text class="input-label">{{ isChanging ? '当前手机号' : '身份证号码' }}</text>
              <input 
                class="input-field" 
                v-model="step1Form.identifier" 
                :placeholder="isChanging ? '请输入当前手机号' : '请输入身份证号码'"
                :type="isChanging ? 'number' : 'text'"
              />
            </view>
            
            <view class="input-item">
              <text class="input-label">验证码</text>
              <view class="code-input-group">
                <input 
                  class="input-field code-input" 
                  v-model="step1Form.code" 
                  placeholder="请输入验证码"
                  type="number"
                  maxlength="6"
                />
                <view class="send-code-btn" :class="{ disabled: isCounting }" @tap="sendVerifyCode(1)">
                  <text>{{ countText }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-actions">
            <button class="next-btn" @tap="verifyIdentity">下一步</button>
          </view>
        </view>
        
        <!-- 步骤2: 绑定新手机 -->
        <view class="bind-form" v-if="currentStep === 2">
          <view class="form-group">
            <view class="input-item">
              <text class="input-label">新手机号</text>
              <input 
                class="input-field" 
                v-model="step2Form.phone" 
                placeholder="请输入新手机号"
                type="number"
              />
            </view>
            
            <view class="input-item">
              <text class="input-label">验证码</text>
              <view class="code-input-group">
                <input 
                  class="input-field code-input" 
                  v-model="step2Form.code" 
                  placeholder="请输入验证码"
                  type="number"
                  maxlength="6"
                />
                <view class="send-code-btn" :class="{ disabled: isCounting }" @tap="sendVerifyCode(2)">
                  <text>{{ countText }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-actions">
            <button class="prev-btn" @tap="prevStep">上一步</button>
            <button class="next-btn" @tap="bindNewPhone">下一步</button>
          </view>
        </view>
        
        <!-- 步骤3: 完成页面 -->
        <view class="success-page" v-if="currentStep === 3">
          <view class="success-icon">✓</view>
          <text class="success-title">{{ isChanging ? '手机号修改成功' : '手机号绑定成功' }}</text>
          <text class="success-desc">您的手机号{{ isChanging ? '已成功修改为' : '已成功绑定为' }}{{ maskPhone(step2Form.phone) }}</text>
          
          <view class="form-actions">
            <button class="done-btn" @tap="finishBindProcess">完成</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 判断是修改手机号还是绑定手机号
const isChanging = ref(true);
// 当前手机号
const currentPhone = ref('13812345678');
// 当前步骤
const currentStep = ref(1);
// 验证码倒计时
const countdown = ref(0);
// 是否正在倒计时
const isCounting = computed(() => countdown.value > 0);
// 倒计时文字
const countText = computed(() => isCounting.value ? `重新发送(${countdown.value}s)` : '发送验证码');

// 步骤1表单
const step1Form = reactive({
  identifier: '', // 手机号或身份证
  code: '' // 验证码
});

// 步骤2表单
const step2Form = reactive({
  phone: '', // 新手机号
  code: '' // 验证码
});

// 初始化页面
const initPage = () => {
  // 检查是绑定新手机还是修改手机
  checkPhoneStatus();
  
  // 预填当前手机号
  if (isChanging.value) {
    step1Form.identifier = currentPhone.value;
  }
};

// 检查手机绑定状态
const checkPhoneStatus = () => {
  // 实际应用中应该从用户信息中获取
  isChanging.value = !!currentPhone.value;
};

// 下一步
const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++;
  }
};

// 上一步
const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// 发送验证码
const sendVerifyCode = (step) => {
  if (isCounting.value) {
    return;
  }
  
  // 验证手机号格式
  let phoneToVerify = '';
  
  if (step === 1) {
    phoneToVerify = isChanging.value ? step1Form.identifier : '';
    
    if (isChanging.value && !validatePhone(phoneToVerify)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      });
      return;
    }
    
    if (!isChanging.value && !step1Form.identifier) {
      uni.showToast({
        title: '请输入身份证号码',
        icon: 'none'
      });
      return;
    }
  } else {
    phoneToVerify = step2Form.phone;
    
    if (!validatePhone(phoneToVerify)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      });
      return;
    }
  }
  
  // 开始倒计时
  startCountdown();
  
  // 模拟发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  });
};

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60;
  
  const timer = setInterval(() => {
    countdown.value--;
    
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 验证身份
const verifyIdentity = () => {
  // 验证表单
  if (isChanging.value) {
    if (!validatePhone(step1Form.identifier)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      });
      return;
    }
  } else {
    if (!step1Form.identifier) {
      uni.showToast({
        title: '请输入身份证号码',
        icon: 'none'
      });
      return;
    }
  }
  
  if (!step1Form.code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({
    title: '验证中...'
  });
  
  // 模拟验证过程
  setTimeout(() => {
    uni.hideLoading();
    nextStep();
  }, 1500);
};

// 绑定新手机
const bindNewPhone = () => {
  // 验证表单
  if (!validatePhone(step2Form.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }
  
  if (!step2Form.code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({
    title: '绑定中...'
  });
  
  // 模拟绑定过程
  setTimeout(() => {
    uni.hideLoading();
    
    // 更新当前手机号
    currentPhone.value = step2Form.phone;
    
    nextStep();
  }, 1500);
};

// 完成绑定流程
const finishBindProcess = () => {
  // 返回账号设置页面
  uni.navigateBack({
    delta: 2 // 返回两层，跳过中间的账号页
  });
};

// 验证手机号格式
const validatePhone = (phone) => {
  return /^1[3-9]\d{9}$/.test(phone);
};

// 手机号脱敏
const maskPhone = (phone) => {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面初始化
initPage();
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.bind-phone-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .phone-container {
    padding: 20px 15px;
    
    .current-phone {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .label {
        font-size: 14px;
        color: #8d6e63;
        margin-bottom: 5px;
        display: block;
      }
      
      .value {
        font-size: 18px;
        color: #5d4037;
        font-weight: 500;
      }
    }
    
    .verify-steps {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 10px;
      
      .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        
        .step-num {
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background-color: #e0e0e0;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 8px;
        }
        
        .step-text {
          font-size: 12px;
          color: #8d6e63;
          white-space: nowrap;
        }
        
        &.active {
          .step-num {
            background-color: #2c7873;
          }
          
          .step-text {
            color: #2c7873;
            font-weight: 500;
          }
        }
        
        &.done {
          .step-num {
            background-color: #4caf50;
          }
        }
      }
      
      .step-line {
        height: 1px;
        flex: 1;
        background-color: #e0e0e0;
        margin: 0 5px;
        margin-bottom: 20px;
      }
    }
    
    .form-container {
      .form-group {
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        
        .input-item {
          padding: 16px;
          border-bottom: 1px solid rgba(141, 110, 99, 0.08);
          
          &:last-child {
            border-bottom: none;
          }
          
          .input-label {
            font-size: 15px;
            color: #5d4037;
            margin-bottom: 10px;
            display: block;
          }
          
          .input-field {
            width: 100%;
            height: 40px;
            font-size: 15px;
            color: #333;
            border: 1px solid rgba(141, 110, 99, 0.2);
            border-radius: 6px;
            padding: 0 12px;
            background-color: rgba(141, 110, 99, 0.05);
          }
          
          .code-input-group {
            display: flex;
            align-items: center;
            
            .code-input {
              flex: 1;
              margin-right: 10px;
            }
            
            .send-code-btn {
              width: 110px;
              height: 40px;
              background-color: #2c7873;
              border-radius: 6px;
              display: flex;
              justify-content: center;
              align-items: center;
              
              text {
                font-size: 14px;
                color: #fff;
              }
              
              &.disabled {
                background-color: #ccc;
              }
            }
          }
        }
      }
      
      .form-actions {
        display: flex;
        margin: 30px 0;
        
        .prev-btn {
          height: 44px;
          line-height: 44px;
          background-color: #f5f5f5;
          color: #5d4037;
          font-size: 16px;
          border-radius: 12px;
          text-align: center;
          margin-right: 10px;
          border: 1px solid rgba(141, 110, 99, 0.2);
          flex: 1;
        }
        
        .next-btn, .done-btn {
          height: 44px;
          line-height: 44px;
          flex: 1;
          background-color: #2c7873;
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          border-radius: 12px;
          text-align: center;
        }
      }
      
      .success-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        
        .success-icon {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          background-color: #4caf50;
          color: #fff;
          font-size: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
        }
        
        .success-title {
          font-size: 20px;
          color: #5d4037;
          font-weight: 600;
          margin-bottom: 10px;
        }
        
        .success-desc {
          font-size: 15px;
          color: #8d6e63;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style> 